<template>
  <div class="app-container">
    <el-card class="box-card">
      <h4>{{$t('Summary')}}</h4>
      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">{{$t('店铺')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('日期')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('订单总数')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('订单总额')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('税费总额')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('税费详情')}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{listQuery.shopName}}</el-col>
          <el-col :span="4" class="table-cell">{{listQuery.beginTime}} / {{listQuery.endTime}} </el-col>
          <el-col :span="4" class="table-cell">{{totalStatistics.totalCount}}</el-col>
          <el-col :span="4" class="table-cell">{{totalStatistics.totalAmount | floorTwoDecimal}}</el-col>
          <el-col :span="4" class="table-cell">{{totalStatistics.taxTotalAmount | floorTwoDecimal}}</el-col>
          <el-col :span="4" class="table-cell">
            <div v-for="tax in totalStatistics.taxDetailLs" :key="tax.code">
              {{tax.code}}：{{tax.totalAmount | floorTwoDecimal}}
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

  <el-card class="box-card">
      <h4>{{$t('Details')}}</h4>
      <!-- 查询结果 -->
      <el-table v-loading="listLoading" :data="list" :element-loading-text="$t('Searching')" border fit highlight-current-row>
        <el-table-column type="index" :index="getIndex" width="50"></el-table-column>

        <el-table-column align="center" :label="$t('日期')" prop="date"/>

        <el-table-column align="center" :label="$t('订单总数')" prop="totalCount"/>

        <el-table-column align="center" :label="$t('订单总额')" prop="totalAmount">
          <template slot-scope="scope">
            {{scope.row.totalAmount | floorTwoDecimal}}
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('税费总额')" prop="taxTotalAmount">
          <template slot-scope="scope">
            {{scope.row.taxTotalAmount | floorTwoDecimal}}
          </template>
        </el-table-column>

        <el-table-column align="center" property="taxDetailLs" :label="$t('税费详情')">
          <template slot-scope="scope">
            <div v-for="tax in scope.row.taxDetailLs" :key="tax.code">
              {{tax.code}}: {{tax.totalAmount | floorTwoDecimal}}
            </div>
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('Operate')" width="300" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-dropdown trigger="click" @command="handleHourDetail">
              <el-button v-permission="['GET /admin/order/order_hour_statistics']" icon="el-icon-time" type="success" size="small">
                {{$t('时间')}}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item  :command="{row:scope.row,time:60}">{{$t('60-minute')}}</el-dropdown-item>
                <el-dropdown-item  :command="{row:scope.row,time:45}">{{$t('45-minute')}}</el-dropdown-item>
                <el-dropdown-item  :command="{row:scope.row,time:30}">{{$t('30-minute')}}</el-dropdown-item>
                <el-dropdown-item  :command="{row:scope.row,time:15}">{{$t('15-minute')}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button v-permission="['GET /admin/order/order_day_detail']" type="primary" size="mini" @click="handleDetail(scope.row)">{{$t('Details')}}</el-button>
          </template>
        </el-table-column>

      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </el-card>
  </div>
</template>

<script>
  import { allForPerm} from '@/api/shop'
  import { orderTotalStatistics, orderDayStatistics } from '@/api/order'
  import BackToTop from '@/components/BackToTop'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import store from '@/store'

  export default {
    name: "orderStatisticsDay",
    components:{
      BackToTop, Pagination
    },
    data(){
      return {
        // 当前店铺
        shop: store.state.user.shop,
        listLoading: true,
        total:0,
        listQuery: {
          page: 1,
          limit: 20,
          shopId: undefined,
          shopName: undefined,
          // 开始时间
          beginTime: undefined,
          // 结束时间
          endTime: undefined
        },
        totalStatistics: {},
        list: [],
        shops:[]
      }
    },
    created() {
      this.listQuery.shopId = this.$route.query.shopId
      this.listQuery.shopName = this.$route.query.shopName
      this.listQuery.beginTime = this.$route.query.beginTime
      this.listQuery.endTime = this.$route.query.endTime

      this.getList()
      allForPerm().then(response=>{
        this.shops = response.data.data.list
      })
    },
    methods: {
      getList(){
        // 汇总查询
        orderTotalStatistics(this.listQuery)
          .then(response => {
            this.totalStatistics = response.data.data
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })

        orderDayStatistics(this.listQuery)
          .then(response => {
            this.list = response.data.data.list
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      },
      handleFilter(){
        this.getList()
      },
      handleHourDetail (row) {
        let query = {
          shopId: this.listQuery.shopId,
          searchDate: row.date,
          time:row.time
        };
        this.$router.push({ path: '/statistics/order_statistics_hour', query: query})
      },
      handleDetail (row) {
        let query = {
          shopId: this.listQuery.shopId,
          searchDate: row.date
        };
        this.$router.push({ path: '/statistics/order_statistics_day_detail', query: query})
      },
      getIndex(index) {
        return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit;
      }
    }
  }
</script>

<style scoped>
  .table-layout {
    margin-top: 20px;
  }

  .table-cell {
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
</style>
